<template>
  <el-dialog
    title="审批流程"
    :visible.sync="dialogVisible"
    width="90%"
    :before-close="handleClose"
  >
    <div class="wrapper">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="form.start"
                  readonly
                  type="date"
                  placeholder="开始时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="截止时间">
                <el-date-picker
                  type="date"
                  readonly
                  placeholder="截止时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.end"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="查看事由">
                <el-input
                  type="textarea"
                  :rows="3"
                  readonly
                  placeholder="请输入内容"
                  v-model="form.applyContent"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          
          <el-form-item label-width="10px">
            <div class="centerWarp">
              <div>
                <el-card class="box-card" >
                  <div class="nameStyle" 
                       :style="{ height: heightY }"
                        >
                    <p v-for="(item,index) in dataName" 
                       :key=index @click="hanldClickName(item,index)"
                       :class="{ 'highlight':index === personNameIndex }"
                       >
                      {{item.personName}}</p>
                  </div>
                </el-card>
              </div>
              <div>
                <el-card class="box-card" >
                  <div style="width: 240px;text-align: center;margin-left:5px;overflow-y:scroll;"
                       :style="{ height: heightY }">
                      <p>{{textValue}}</p>
                  </div>
                </el-card>
              </div>
              <div class="left" :style="{ height: heightTree }">
                <el-tree
                  ref="tree"
                  style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
                  :data="treeData"
                  node-key="id"
                  :props="defaultProps"
                  highlight-current
                  @node-click="handleNodeClick"
                  :current-node-key="currentNodekey"
                  :default-expanded-keys="[treeData[0].children[0]]"
                ></el-tree>
              </div>
              <div class="right">
                <div class="thumbnail" :style="{ height: heightY }">
                  <div class="checkbox-container">
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                      <el-checkbox v-for="(cityItem) in imageData" :key="cityItem.id" :label="cityItem.id"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div class="image-container">
                    <img
                      v-for="(image, index) in imageData"
                      :src="image.description"
                      :key="index"
                      :style="{
                        width: '140px',
                        height: '200px',
                        border:
                          index === selectedImageIndex ? '2px solid red' : '',
                      }"
                      @click="selectImage(index)"
                    />
                  </div>
                  
                </div>
                <div class="bigPicture" :style="{ height: heightY }">
                  <img
                    :src="
                      selectedImageIndex !== null
                        ? imageData[selectedImageIndex].description
                        : ''
                    "
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="反馈意见">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="returnContent"
                  ></el-input>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="clickAuthorization">授 权</el-button>
    <el-button type="primary" @click="clickApprove">审批通过</el-button>
    <el-button type="danger" @click="turnDown">驳回申请</el-button>
  </span>
  </el-dialog>
</template>
    
<script>
  import { getDetail,authorization,approval} from "@/api/datacentersg/achives/documentApi";
  import store from "@/store";
  export default {
   data() {
    return {
      heightY: window.innerHeight - 190 + "px",
      heightTree: window.innerHeight - 150 + "px",
      tabPosition: "left",
      form: {
        start: "",
        end: "",
        applyContent: "",
      },
      imageData: [
        {
          description:
            "https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500",
          id: "001",
          fileName: "4-1-1-001.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          id: "002",
          fileName: "4-1-1-002.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
          id: "003",
          fileName: "4-1-1-003.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
          id: "004",
          fileName: "4-1-1-004.jpg",
        },
        {
          description:
            "https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          id: "005",
          fileName: "4-1-1-005.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          id: "006",
          fileName: "4-1-1-006.jpg",
        },
        {
          description:
            "https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          id: "007",
          fileName: "4-1-1-007.jpg",
        },
        {
          description:
            "https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716",
          id: "008",
          fileName: "4-1-1-008.jpg",
        },
      ],
      treeData: [
        {
          id: "01",
          parentId: "ZA",
          name: "一、履历材料",
          spell: null,
          children: [
            {
              id: "168",
              parentId: "01",
              name: "干部履历表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
          ],
          data: null,
          flag: "0",
          relationState: null,
          isPart: null,
        },
        {
          id: "02",
          parentId: "ZA",
          name: "二、自传材料",
          spell: null,
          children: [
            {
              id: "169",
              parentId: "02",
              name: "个人小结",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
          ],
          data: null,
          flag: "0",
          relationState: null,
          isPart: null,
        },
        {
          id: "03",
          parentId: "ZA",
          name: "三、鉴定、考核材料",
          spell: null,
          children: [
            {
              id: "68",
              parentId: "03",
              name: "2017年度考核登记表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
            {
              id: "69",
              parentId: "03",
              name: "2018年度考核登记表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
            {
              id: "70",
              parentId: "03",
              name: "2019年度考核登记表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
          ],
          data: null,
          flag: "0",
          relationState: null,
          isPart: null,
        },
      ],
      checkedCities: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedImageIndex: 0,
      currentNodekey: "",
      isIndeterminate: true,
      checkAll: false,
      textValue: "",
      oneselfData: [],
      cityItemIdAll: [],
      dialogVisible: false,
      row:null,
      dataName:[],
      rowItem:null,
      returnContent:"",
      applyId:"",
      personNameIndex:0,
    };
  },
  created() {
  },
  methods: {
    init(row) {
      this.dialogVisible = true;
      this.row = row;
      this.getListDetail();
    },
    //详情
    getListDetail(){
      const params={
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data:{
          applyId:this.row.applyId,
        }
      }
      getDetail(params).then((result) =>{
         if(result.result){
            this.applyId = result.resultdata.data.applyId
            this.form.start = result.resultdata.data.addDate
            this.form.end = result.resultdata.data.endDate
            this.form.applyContent = result.resultdata.data.applyContent
            this.dataName = result.resultdata.data.personList;
            this.checkedCities = []; // 初始化为一个空数组
            const fileNames = this.dataName[0].empowerLable ? this.dataName[0].empowerLable.split(',') : [];
            fileNames.forEach((fileName) => {//将拼接的fileName和name还原
                const name = fileName.split('_')[0]; // 获取 name
                const realFileName = fileName.split('_')[1]; // 获取真正的文件名
                // 遍历this.treeData中的每一项
                this.treeData.forEach((treeItem) => {
                    // 遍历该目录下的每一张图片
                    treeItem.children.forEach((imageItem) => {
                      if (imageItem.name == name) { // 如果图片文件名相同
                        // 查找对应的图片对象                  
                        this.imageData.forEach((item)=>{
                          let itemFileName = item.fileName.replace(".jpg", "")
                          if (itemFileName == realFileName) {
                              this.checkedCities.push(item.id);
                          }
                        })
                      }
                    });
                });
            })
            this.textValue = this.dataName[0].empowerLable
         }
      })
    },
    selectChange() {},
    selectImage(index) {
      this.selectedImageIndex = index;
    },
    handleNodeClick(data) {
      this.oneselfData = [data];
    },
    handleClose() {
      this.dialogVisible = false;
    },
    hanldClickName(item,index){
      this.rowItem = item;
      this.textValue = item.empowerLable
      this.personNameIndex = index; //设置选中的索引
      this.checkedCities = []; // 初始化为一个空数组
      const fileNames = this.rowItem.empowerLable ? this.rowItem.empowerLable.split(',') : [];
      fileNames.forEach((fileName) => {//将拼接的fileName和name还原
          const name = fileName.split('_')[0]; // 获取 name
          const realFileName = fileName.split('_')[1]; // 获取真正的文件名
          // 遍历this.treeData中的每一项
          this.treeData.forEach((treeItem) => {
              // 遍历该目录下的每一张图片
              treeItem.children.forEach((imageItem) => {
                if (imageItem.name == name) { // 如果图片文件名相同
                  // 查找对应的图片对象                  
                  this.imageData.forEach((item)=>{
                    let itemFileName = item.fileName.replace(".jpg", "")
                    if (itemFileName == realFileName) {
                        this.checkedCities.push(item.id);
                    }
                  })
                }
              });
          });
      })
    },
    handleCheckedCitiesChange(value) {
      if(this.rowItem == null){
        this.$message({
          message: '请先选择授权人员',
          type: 'warning'
        });
      }else if(this.oneselfData.length == 0){
          this.$message({
            message: '请选择相应目录树',
            type: 'warning'
          });
      }else{
        let textsToAdd = []; // 存放需要添加到this.textValue中的文本
        
        // 清空this.textValue
        this.textValue = '';
        
        value.forEach((imageId) => {
          const image = this.imageData.find(item => item.id === imageId);
          if (image) {
            this.oneselfData.forEach((item) => {
              let text = `${item.name}_${image.fileName.replace(".jpg", "")}`;
              textsToAdd.push(text);
            });
          }
        });
        // 将textsToAdd数组中的每一个文本添加到this.textValue中
        textsToAdd.forEach((text) => {
          this.textValue += text + ",";
        });
      }
    },
    
    // 授权
    clickAuthorization(){
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data:{
          empowerLable:this.textValue,//将授权的图片名称和目录名称结合以逗号的形式传入这个里面
          dataId:"",//你点击授权人的id
        }
      }
      // params.data.empowerLable = this.textValue + ","
      params.data.dataId = this.rowItem.dataId;
      authorization(params).then((result)=>{
        if(result.result){
          this.$message({
            message: '授权成功',
            type: 'success'
          });
          this.dialogVisible=false;
        }
      })
    },

    // 审批通过
    clickApprove(){
      const params={
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data:{
          applyId:this.applyId,
          startDate:this.form.start,
          endDate:this.form.end,
          returnContent:this.returnContent,
          auditState:2,
        }
      }
      approval(params).then((result)=>{
        if(result.result){
          this.$message({
            message: '审批通过',
            type: 'success'
          });
          this.dialogVisible=false;
        }
      })
    },
    // 驳回申请
    turnDown(){
      const params={
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data:{
          applyId:this.applyId,
          startDate:this.form.start,
          endDate:this.form.end,
          returnContent:this.returnContent,
          auditState:3,
        }
      }
      approval(params).then((result)=>{
        if(result.result){
          this.$message({
            message: '驳回申请成功',
            type: 'success'
          });
          this.dialogVisible=false;
        }
      })
    }
  },
};
</script>
  
    <style scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
}
.left {
  float: left;
  margin-left:5px;
  background: #f7f2ec;
  width: 18.417vw;
  overflow-y: scroll;
}
.nameStyle{
  text-align: center;
  font-size: 18px;
  color:#409eff;
  overflow-y: scroll;
}
.nameStyle p{
  padding: 5px;
  height: 40px;
}
.highlight {
  background-color:#C6E2FF;
  padding: 5px;
  height: 40px;
}
.right {
  float: left;
  margin-left: 15px;
  background: #f7f2ec;
}
.thumbnail {
  width: 205px;
  overflow-y: scroll;
  float: left;
  margin-bottom: 5px;
  background: #fff;
  display: flex;
}
.checkbox-container {
  flex: 1;
}
.checkbox-container /deep/.el-checkbox{
  width: 21px;
  height: 210px;
}
.checkbox-container /deep/.el-checkbox__label{
  display:none;
}
.image-container {
  flex: 1;
}
.bigPicture {
  float: left;
  width: 600px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
  margin-left: 10px;
}
>>> .el-tree-node__content {
  height: 60px;
}
.centerWarp {
  display: flex;
}
/deep/ .el-tree > .el-tree-node > .el-tree-node__content {
  font-weight: 900;
  background: #cfe5fc;
}
/deep/
  .el-tree
  > .el-tree-node
  > .el-tree-node__children
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label {
  font-weight: 700;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background: #6baef1;
}

>>> .el-tree-node__content {
  /* background-color: #CFE5FC; */
  margin-top: 2px;
}

</style>